<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">路由名称</span>
        <el-input v-model="apiSearchData.name" placeholder="路由名称" class="searchInfoInput"></el-input>

        <span class="inputLabel">路由编码</span>
        <el-input v-model="apiSearchData.code" placeholder="路由编码" class="searchInfoInput"></el-input>

        <span class="inputLabel">断言</span>
        <el-input v-model="apiSearchData.predicates" placeholder="断言" class="searchInfoInput"></el-input>

        <span class="inputLabel">微服务</span>
        <el-select v-model="apiSearchData.applicationName" placeholder="微服务" class="searchInfoInput" clearable>
            <el-option :label="item.applicationName" :value="item.applicationName" v-for="item in applicationList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryApiInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script setup name="ApiSearch" lang="ts">
import {apiRouteInfoQuery} from "@/request/api";
import {applicationInfoQuery} from "@/request/service";
import {computed, ref} from "vue";
import {useApiStore} from "@/stores/apiManage/api";

let applicationList = ref([]);
let searchLoading = ref(false);

let apiSearchData = computed(() => {return useApiStore().apiSearchData})

// 查询应用列表
applicationInfoQuery(apiSearchData.value).then(res => {
    if (res["code"] === '200') {
        applicationList.value = res.data;
    }
})

function resetInput() {
    useApiStore().resetApiSearchData({
        name: "",
        code: "",
        predicates: "",
        applicationName: ""
    })
}

function queryApiInfo() {
    searchLoading.value = true
    apiRouteInfoQuery(apiSearchData.value).then(res => {
        if (res["code"] === '200') {
            useApiStore().resetRouterDataList(res.data);
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}

</style>